import {HtmlNodeModel, HtmlNode} from '@logicflow/core'

class UserTaskModel extends HtmlNodeModel {


    setAttributes() {
        this.properties = {
            name: '用户节点',
            ...this.properties
        }
        this.text.editable = false // 禁止节点文本编辑
        // 设置节点宽高和锚点
        const width = 120
        const height = 80
        this.width = width
        this.height = height
        this.anchorsOffset = [
            [width / 2, 0],
            [0, height / 2],
            [-width / 2, 0],
            [0, -height / 2]
        ]
    }
}

class UserTaskNode extends HtmlNode {
    setHtml(rootEl: HTMLElement) {
        const {properties} = this.props.model
        const el = document.createElement('div')
        el.className = 'user-task'
        const html = `
     <svg t="1673574521912" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4266" width="20" height="20"><path d="M438.272 603.648c-132.608 0-240.64-108.032-240.64-240.64s108.032-240.64 240.64-240.64 240.64 108.032 240.64 240.64-108.032 240.64-240.64 240.64z m0-419.84c-98.816 0-179.2 80.384-179.2 179.2s80.384 179.2 179.2 179.2 179.2-80.384 179.2-179.2-80.384-179.2-179.2-179.2z" p-id="4267" ></path><path d="M832.512 955.904h-30.72c-257.536-1.536-361.984 0-363.008 0H44.032v-30.72c0-209.408 165.888-361.984 394.24-361.984s394.24 152.064 394.24 361.984v30.72z m-725.504-61.44h331.264c0.512 0 96.256-1.536 331.264 0-15.36-157.696-150.016-269.312-331.264-269.312-181.248-0.512-315.904 111.104-331.264 269.312zM715.776 538.112l-35.84-49.664C732.16 450.56 762.88 390.144 762.88 326.144c0-97.792-72.704-182.272-168.96-196.608l9.216-60.928c126.464 18.944 221.184 129.536 221.184 257.536 0 83.968-40.448 162.816-108.544 211.968z" p-id="4268" ></path><path d="M964.096 882.176l-58.368-19.456c8.192-24.576 12.288-50.176 12.288-76.288 0-131.072-107.008-238.08-238.08-238.08V486.4c165.376 0 299.52 134.144 299.52 299.52 0.512 32.768-5.12 65.024-15.36 96.256z" p-id="4269" ></path><path d="M964.096 881.664h-67.072l9.216-20.48h57.856zM603.136 129.536H593.92v-61.44l9.216 0.512z" p-id="4270" ></path></svg>
     <div class="title">${properties.name}</div>
    `
        el.innerHTML = html
        // 需要先把之前渲染的子节点清除掉。
        rootEl.innerHTML = ''
        rootEl.appendChild(el)
    }
}

export default {
    type: 'UserTask',
    view: UserTaskNode,
    model: UserTaskModel
}
